Upload.js ➔ initDropzone - Code Metrics - Inspection of "manage conflick" - o2system/venus-form - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 0e4d57...84f40e )

by Nur

created 2019-04-15 14:11 UTC

Upload.js ➔ initDropzone B

↳ Parent: src/Components/Upload.js

Complexity

Conditions	4
Paths	170

Size

Total Lines	155
Code Lines	105

Duplication

Lines	29
Ratio	18.71 %

Importance

Changes	5
Bugs	1	Features	0

Metric	Value
cc	4
eloc	105
c	5
b	1
f	0
nc	170
nop	0
dl	29
loc	155
rs	7

10 Functions

Rating	Name	Duplication	Size	Complexity
A	Upload.js ➔ ... ➔ dropzoneCards.error	0	5	1
A	Upload.js ➔ ... ➔ dropzoneTable.sending	0	6	1
A	Upload.js ➔ ... ➔ document.querySelector.onclick	0	3	1
A	Upload.js ➔ ... ➔ dropzoneTable.queuecomplete	0	3	1
A	Upload.js ➔ ... ➔ dropzoneTable.success	0	4	1
B	Upload.js ➔ ... ➔ dropzoneTable.addedfile	0	27	7
A	Upload.js ➔ ... ➔ dropzoneTable.totaluploadprogress	0	3	1
A	Upload.js ➔ ... ➔ dropzoneCards.success	0	5	1
A	Upload.js ➔ ... ➔ dropzoneTable.error	0	4	1
B	Upload.js ➔ ... ➔ dropzoneCards.addedfile	29	29	7

How to fix Long Method

/**
 * This file is part of the O2System Venus UI Framework package.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *
 * @author         Steeve Andrian Salim
 * @copyright      Copyright (c) Steeve Andrian Salim
 */
// ------------------------------------------------------------------------

import * as $ from 'jquery';
import * as Dropzone from 'dropzone';
import 'dropify/dist/js/dropify';

/**
 * Class Upload
 *
 * @author          Teguh Rianto
 * @package         Components
 */
export default class Upload {
    constructor() {
        /**
         * Init dropzone
         */
        this.initDropzone();

        /**
         * Init dropify
         */
        this.initDropify();
    }

    initDropzone() {
        if (typeof Dropzone != 'undefined') {
            //Dropzone.autoDiscover = false;

            // Cards version
            const dropzoneCards = $('#dropzone-cards');
            if(dropzoneCards.length) {

                let dropzoneCardsActionUrl = dropzoneCards.data('action-url');

                let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');

                dropzoneCardsFilePreview.removeAttr('id');

                let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
                dropzoneCardsFilePreview.parent().remove();

                let dropzoneCardForms = $('#dropzone-cards-form').dropzone({

                    url: dropzoneCardsActionUrl,
                    autoProcessQueue: true,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneCardsFilePreviewTemplate
                });

                dropzoneCards.on("addedfile", function (file) {

                    console.log('titit');

                    var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
                    file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
                    file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);

                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {

                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                });

                dropzoneCards.on("success", function (file, resp) {

                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneCards.on("error", function (file) {
                    file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });
            }

            // Table version
            const dropzoneTable = $('#dropzone-table');
            if(dropzoneTable.length) {

                let dropzoneTableActionUrl = dropzoneTable.data('action-url');


                let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');

                dropzoneTableFilePreview.removeAttr('id');

                let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
                dropzoneTableFilePreview.parent().remove();

                let dropzoneTable = $('#dropzone-table-form').dropzone({
                    url: dropzoneTableActionUrl,
                    autoProcessQueue: false,
                    thumbnailWidth: null,
                    thumbnailHeight: null,
                    previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
                    previewsContainer: ".media-list-table",
                    clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
                });
                
                dropzoneTable.on("addedfile", function (file) {
                    console.log('test');

                    var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
                    if (imagesFileTypes.indexOf(file.type) != -1) {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
                    } else if (file.type === 'application/pdf') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
                    } else if (file.type === 'application/doc' | 'application/docx') {

                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
                    } else if (file.type === 'application/ppt' | 'application/pptx') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
                    } else if (file.type === 'video/mp4' | 'video/webm' | 'video/mkv') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
                    } else if (file.type === 'audio/mpeg') {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
                    } else {
                        file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
                        file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
                    }
                    // Hookup the start button
                    file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
                });

                dropzoneTable.on("totaluploadprogress", function(progress) {
                    document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
                });

                dropzoneTable.on("sending", function(file) {
                    // Show the total progress bar when upload starts
                    document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
                    // And disable the start button
                    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
                });

                dropzoneTable.on("success", function (file, resp) {

                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("error", function (file) {
                    file.previewElement.querySelector(".upload-progress").style.display = 'none';
                    file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
                });

                dropzoneTable.on("queuecomplete", function(progress) {

                    document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
                });

                // Setup the buttons for all transfers
                // The "add files" button doesn't need to be setup because the config
                // `clickable` has already been specified.
                document.querySelector("#dropzone-table-actions .start").onclick = function() {
                    dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
                };

                document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
                    dropzoneTable.removeAllFiles(true);
                };
            }
        }
    }

    initDropify(){
        $('.dropify').dropify();
    }
}

1		/**
2		* This file is part of the O2System Venus UI Framework package.
3		*
4		* For the full copyright and license information, please view the LICENSE
5		* file that was distributed with this source code.
6		*
7		* @author Steeve Andrian Salim
8		* @copyright Copyright (c) Steeve Andrian Salim
9		*/
10		// ------------------------------------------------------------------------
11
12		import * as $ from 'jquery';
13		import * as Dropzone from 'dropzone';
14		import 'dropify/dist/js/dropify';
15
16		/**
17		* Class Upload
18		*
19		* @author Teguh Rianto
20		* @package Components
21		*/
22		export default class Upload {
23		constructor() {
24		/**
25		* Init dropzone
26		*/
27		this.initDropzone();
28
29		/**
30		* Init dropify
31		*/
32		this.initDropify();
33		}
34
35		initDropzone() {
36		if (typeof Dropzone != 'undefined') {
37		//Dropzone.autoDiscover = false;
38
39		// Cards version
40		const dropzoneCards = $('#dropzone-cards');
41		if(dropzoneCards.length) {
42
43		let dropzoneCardsActionUrl = dropzoneCards.data('action-url');
44
45		let dropzoneCardsFilePreview = dropzoneCardsElement.find('#dropzone-cards-template');
		0 ignored issues – show Bug introduced 2019-04-15 14:15 UTC by Report Bug Copy Issue Report The variable `dropzoneCardsElement` seems to be never declared. If this is a global, consider adding a `/** global: dropzoneCardsElement */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
46		dropzoneCardsFilePreview.removeAttr('id');
47
48		let dropzoneCardsFilePreviewTemplate = dropzoneCardsFilePreview.parent().html();
49		dropzoneCardsFilePreview.parent().remove();
50
51		let dropzoneCardForms = $('#dropzone-cards-form').dropzone({
		0 ignored issues – show Unused Code introduced 2019-04-15 14:15 UTC by Report Bug Copy Issue Report The variable `dropzoneCardForms` seems to be never used. Consider removing it. Loading history...
52		url: dropzoneCardsActionUrl,
53		autoProcessQueue: true,
54		thumbnailWidth: null,
55		thumbnailHeight: null,
56		previewTemplate: dropzoneCardsFilePreviewTemplate
57		});
58
59	View Code Duplication	dropzoneCards.on("addedfile", function (file) {
		0 ignored issues – show Duplication introduced 2019-03-12 18:37 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
60		console.log('titit');
		0 ignored issues – show Debugging Code introduced 2019-03-12 18:37 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
61		var fileId = 'media' + document.querySelectorAll('.media-list-item').length;
62		file.previewElement.getElementsByTagName('input')[0].setAttribute('id', fileId);
63		file.previewElement.getElementsByTagName('label')[0].setAttribute('for', fileId);
64
65		var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
66		if (imagesFileTypes.indexOf(file.type) != -1) {
67		file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
68		} else if (file.type === 'application/pdf') {
69		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
70		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
71		} else if (file.type === 'application/doc' \| 'application/docx') {
		0 ignored issues – show introduced 2019-01-16 10:51 UTC by Report Bug Copy Issue Report You have used a bitwise operator `\|` in a condition. Did you maybe want to use the logical operator `\|\|` Loading history...
72		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
73		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
74		} else if (file.type === 'application/ppt' \| 'application/pptx') {
75		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
76		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
77		} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
78		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
79		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
80		} else if (file.type === 'audio/mpeg') {
81		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
82		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
83		} else {
84		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
85		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
86		}
87		});
88
89		dropzoneCards.on("success", function (file, resp) {
		0 ignored issues – show Unused Code introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The parameter `resp` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
90		file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
91		file.previewElement.querySelector(".upload-progress").style.display = 'none';
92		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
93		});
94
95		dropzoneCards.on("error", function (file) {
96		file.previewElement.querySelector(".media-list-item").classList.remove('uploading');
97		file.previewElement.querySelector(".upload-progress").style.display = 'none';
98		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
99		});
100		}
101
102		// Table version
103		const dropzoneTable = $('#dropzone-table');
104		if(dropzoneTable.length) {
105
106		let dropzoneTableActionUrl = dropzoneTable.data('action-url');
		0 ignored issues – show Bug introduced 2019-04-15 14:15 UTC by Report Bug Copy Issue Report The local (let) variable `dropzoneTable` is used before it is defined. This will cause a reference error. Loading history...
107
108		let dropzoneTableFilePreview = dropzoneTableElement.find('#dropzone-table-template');
		0 ignored issues – show Bug introduced 2019-04-15 14:15 UTC by Report Bug Copy Issue Report The variable `dropzoneTableElement` seems to be never declared. If this is a global, consider adding a `/** global: dropzoneTableElement */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
109		dropzoneTableFilePreview.removeAttr('id');
110
111		let dropzoneTableFilePreviewTemplate = dropzoneTableFilePreview.parent().html();
112		dropzoneTableFilePreview.parent().remove();
113
114		let dropzoneTable = $('#dropzone-table-form').dropzone({
115		url: dropzoneTableActionUrl,
116		autoProcessQueue: false,
117		thumbnailWidth: null,
118		thumbnailHeight: null,
119		previewTemplate: dropzoneTableFilePreviewTemplate, // Define the container to display the previews
120		previewsContainer: ".media-list-table",
121		clickable: "#dropzone-add-file", // Define the element that should be used as click trigger to select files.
122		});
123
124		dropzoneTable.on("addedfile", function (file) {
125		console.log('test');
		0 ignored issues – show Debugging Code introduced 2019-03-12 18:37 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
126		var imagesFileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
127		if (imagesFileTypes.indexOf(file.type) != -1) {
128		file.previewElement.querySelector('.media-item-file-details').style.display = 'none';
129		} else if (file.type === 'application/pdf') {
130		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
131		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-pdf"></i>';
132		} else if (file.type === 'application/doc' \| 'application/docx') {
		0 ignored issues – show introduced 2019-03-12 18:37 UTC by Report Bug Copy Issue Report You have used a bitwise operator `\|` in a condition. Did you maybe want to use the logical operator `\|\|` Loading history...
133		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
134		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-word"></i>';
135		} else if (file.type === 'application/ppt' \| 'application/pptx') {
136		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
137		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-powerpoint"></i>';
138		} else if (file.type === 'video/mp4' \| 'video/webm' \| 'video/mkv') {
139		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
140		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-video"></i>';
141		} else if (file.type === 'audio/mpeg') {
142		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
143		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file-audio"></i>';
144		} else {
145		file.previewElement.querySelector('.media-item-file-details').style.display = 'block';
146		file.previewElement.querySelector('.media-item-icon').innerHTML = '<i class="fas fa-file"></i>';
147		}
148		// Hookup the start button
149		file.previewElement.querySelector(".start").onclick = function() { dropzoneTable.enqueueFile(file); };
150		});
151
152		dropzoneTable.on("totaluploadprogress", function(progress) {
153		document.querySelector("#dropzone-table-total-progress .progress-bar").style.width = progress + "%";
154		});
155
156		dropzoneTable.on("sending", function(file) {
157		// Show the total progress bar when upload starts
158		document.querySelector("#dropzone-table-total-progress").style.opacity = "1";
159		// And disable the start button
160		file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
161		});
162
163		dropzoneTable.on("success", function (file, resp) {
		0 ignored issues – show Unused Code introduced 2019-03-11 17:04 UTC by Report Bug Copy Issue Report The parameter `resp` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
164		file.previewElement.querySelector(".upload-progress").style.display = 'none';
165		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
166		});
167
168		dropzoneTable.on("error", function (file) {
169		file.previewElement.querySelector(".upload-progress").style.display = 'none';
170		file.previewElement.querySelector(".media-item-file-extension").innerHTML = file.type;
171		});
172
173		dropzoneTable.on("queuecomplete", function(progress) {
		0 ignored issues – show Unused Code introduced 2019-03-12 18:37 UTC by Report Bug Copy Issue Report The parameter `progress` is not used and could be removed. This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function. Loading history...
174		document.querySelector("#dropzone-table-total-progress").style.opacity = "0";
175		});
176
177		// Setup the buttons for all transfers
178		// The "add files" button doesn't need to be setup because the config
179		// `clickable` has already been specified.
180		document.querySelector("#dropzone-table-actions .start").onclick = function() {
181		dropzoneTable.enqueueFiles(dropzoneTable.getFilesWithStatus(Dropzone.ADDED));
182		};
183
184		document.querySelector("#dropzone-table-actions .cancel").onclick = function() {
185		dropzoneTable.removeAllFiles(true);
186		};
187		}
188		}
189		}
190
191		initDropify(){
192		$('.dropify').dropify();
193		}
194		}

o2system / venus-form

GitHub Access Token became invalid

Push — master ( 0e4d57...84f40e )

Upload.js ➔ initDropzone B

Complexity

Size

Duplication

Importance

10 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like